<!-- GiftPage.vue -->
<template>
  <div>
    <h1>🎁 礼物中心</h1>

    <!-- 使用 GiftCard 组件，传入不同 props -->
    <GiftCard receiver="小明" gift-content="一台 Switch 游戏机" card-color="#ff7675" />

    <GiftCard receiver="小红" gift-content="一盒巧克力" card-color="#74b9ff" />

    <GiftCard receiver="老板" :card-color="bossCardColor" />
    <!-- 注意：giftContent 没传，会用默认值“一份惊喜” -->
  </div>
</template>

<script setup>
import GiftCard from '@/components/GiftCard.vue' // 👈 导入子组件

// 可以用响应式数据动态传值
import { ref } from 'vue'
const bossCardColor = ref('#55efc4') // 老板的卡片颜色
</script>

<style scoped>
h1 {
  text-align: center;
  color: #2d3436;
  margin-bottom: 30px;
}
</style>
